import { Form, Input, Select, Space, Button, DatePicker } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import React, { useRef } from "react";
import "@/views/commodity/style/style.less";
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'
import { apiServicePage, apiStoreServiceDel, apiStoreServiceUpdateState } from '@/request/services'
import TheImage from '@/components/TheImage'
import TheDialog from '@/components/TheDialog'
import Edit from "../component/Edit";
import Detail from "../component/Detail";

const { RangePicker } = DatePicker;

const SearchHeader = ({ getValue, openAdd }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.serviceStartDate = getDateTime3(values.time[0])
      values.serviceEndDate = getDateTime3(values.time[1])
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      storeServiceName: '',
      serviceId: '',
      serviceStatus: '',
      time: []
    })
    getValue({})
  };
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Form layout={'inline'} ref={formRef} onFinish={onFinish}>
        <Form.Item name={"storeServiceName"}>
          <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"服务名称"} />
        </Form.Item>
        <Form.Item name={"serviceId"} rules={[{pattern: /^[0-9]+$/, message: '只能输入数字'}]} >
          <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"服务ID"} />
        </Form.Item>
        <Form.Item name={"serviceStatus"} label="上架状态">
          <Select allowClear
            style={{ width: 140 }}
            options={[{ value: 'Y', label: '上架' }, { value: 'N', label: '下架' }, { value: 'G', label: '管理员关闭' }]}
            placeholder={"上架状态"}
          />
        </Form.Item>
        <Form.Item name={"time"} label="上架时间">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class Library extends React.Component {
  state = {
    columns: [
      {
        title: "服务ID",
        dataIndex: "serviceId",
        key: "serviceId",
      },
      {
        title: "服务名称",
        dataIndex: "serviceName",
        key: "serviceName",
      },
      {
        title: "服务logo",
        dataIndex: "serviceShowFile",
        key: "serviceShowFile",
        render: (text, render) => {
          return <TheImage src={render.serviceShowFile} width={80} height={80} />
        }
      },
      {
        title: "所属类型",
        dataIndex: "serviceClassifyName",
        key: "serviceClassifyName",
      },
      {
        title: "服务价格",
        dataIndex: "serviceRealPrice",
        key: "serviceRealPrice",
        render: (text, render) => {
          return <React.$Price price={render.serviceRealPrice || 0} />
        }
      },
      {
        title: "预约时间",
        render: (text, render) => {
          return <div>
            {render.serviceStartTime} 至 {render.serviceEndTime}
          </div>
        }
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "状态",
        render: (text, render) => {
          return '待审批';
        },
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton hasPermi={['service:library:publish']} onClick={() => this.releaseConfirm(render.serviceId)}>发布</TheButton>
              <TheButton hasPermi={['service:library:detail']} onClick={() => this.openDetailDialog(render.serviceId)}>查看详情</TheButton>
              <TheButton hasPermi={['service:library:edit']} onClick={() => this.openEditDialog(render.serviceId)}>编辑</TheButton>
              <TheButton hasPermi={['service:library:detele']} onClick={() => this.delConfirm(render.serviceId)}>删除</TheButton>
            </div>
          );
        },
      },
    ],
    data: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {},
    loading: false
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    const { searchValue, pageData } = this.state
    let res = await apiServicePage({ ...searchValue, ...pageData, approvalStatus: 'D' })
    if (res.data && res.code === 0) {
      this.setState({
        data: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount,
        loading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => this.getData())
  };
  releaseConfirm = (serviceId) => {
    React.$confirm({
      title: "您确认发布本条服务吗？",
      onOk: async () => {
        let res = await apiStoreServiceUpdateState({ serviceId, reviewStatus: 'S' })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '发布成功'
          })
          this.getData()
        }
      },
    });
  }
  delConfirm = (serviceId) => {
    React.$confirm({
      title: "您确认删除本条服务吗？",
      onOk: async () => {
        let res = await apiStoreServiceDel({ serviceId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      },
    });
  };
  openDetailDialog = (serviceId) => {
    this.setState({
      serviceId,
      detailVisible: true
    })
  }
  openEditDialog = (serviceId) => {
    this.setState({
      businessCategory: sessionStorage.getItem('businessCategory'),
      serviceId,
      editVisible: true
    })
  }
  editDialogCancel = () => {
    this.setState({
      serviceId: '',
      editVisible: false
    })
  }
  detailClose = () => {
    this.setState({
      serviceId: '',
      detailVisible: false
    })
  }
  getValue = (value) => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  render() {
    const { businessCategory,columns, data, pageData, total, serviceId, editVisible, detailVisible, loading } = this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <div className="p-search-box">
          <SearchHeader getValue={this.getValue} />
        </div>
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={data}
            loading={loading}
          />
          <ThePagination
            pageNo={pageData.pageNo}
            pageSize={pageData.pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title="修改服务"
          visible={editVisible}
          handleCancel={this.editDialogCancel}
          footer={null}
        >
          <Edit serviceId={serviceId} closeDialog={this.editDialogCancel}  businessCategory={businessCategory} reload={this.getData} />
        </TheDialog>
        <TheDialog
          title="服务详情"
          visible={detailVisible}
          handleCancel={this.detailClose}
          footer={null}
        >
          <Detail serviceId={serviceId} />
        </TheDialog>
      </div>
    );
  }
}

export default Library;
